<template>
	<view class="boxs">
		<Modkexq :arr="obj.mallorder"></Modkexq>
		<view class="hrs"></view>
		<view class="btnbox">
			<view class="listbox" v-for="(item,index) in arr" :key="index" @click="xuanz(item.name)">
				<view class="leftbox">
					<image :src="item.image" mode=""></image>
					<text>{{item.name}}</text>
				</view>
				<view class="angle"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import Modkexq from "../../components/Modkexq/index.vue"
	import {
		getsaleinfo
	} from "../../api/api/index.js"
	export default {
		data() {
			return {
				arr: [{
					image: "http://youjialibo.wm76.mtnet.ren/upload/20210909/5313c53bc9d8a190a1cddcd991f60231.png",
					name: "退款"
				}, {
					image: "http://youjialibo.wm76.mtnet.ren/upload/20210909/7408cd57c7c91099158cb7665d13bd90.png",
					name: "换货"
				}],
				// 订单id
				id: 0,
				obj: {}
			}
		},
		methods: {
			xuanz(v) {
				if (v == "退款") {
					this.jumpLink({
						link: "/pages/refund/index",
						query: {
							state: 1,
							id:this.obj.id
						}
					})
				}
				if (v == "换货") {
					this.jumpLink({
						link: "/pages/refund/index",
						query: {
							state: 2,
							id:this.obj.id
						}
					})
				}
			}
		},
		components: {
			Modkexq
		},
		onShow() {
			uni.showLoading({
				title: "加载中"
			})
			getsaleinfo({
				id: this.id
			}).then(res => {
				uni.hideLoading()
				this.obj = res.data
			})
		},
		onLoad(v) {
			this.id = v.id
		}
	}
</script>

<style scoped lang="scss">
	.boxs {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: #FFFFFF;
	}

	.hrs {
		width: 750rpx;
		height: 15rpx;
		background-color: #efefef;
	}

	.btnbox {
		background-color: #FFFFFF;
		padding: 40rpx 59rpx 75rpx 55rpx;
		box-sizing: border-box;

		.listbox {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;

			.leftbox {
				display: flex;
				align-items: center;

				image {
					width: 51rpx;
					height: 46rpx;
				}

				text {
					font-family: MicrosoftYaHei;
					font-size: 30rpx;
					color: #282828;
					margin-left: 34rpx;
				}
			}

			.angle {
				width: 20rpx;
				height: 20rpx;
				border-top: 1px solid #000;
				border-left: 1px solid #000;
				transform: rotate(135deg)
			}
		}
	}
</style>
